<template>
  <div>
    <div class="demo-input-suffix">
      <span style="width: 10%">患者姓名：</span>
      <el-input
        style="width: 10%"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="patientName"
      >
      </el-input>
      <span style="width: 10%">患者身份证：</span>
      <el-input
        style="width: 20%"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="cardId"
      >
      </el-input>
      <el-select style="margin: 10px"
               v-model="selectRegion"
               v-show="role == '1'"
               @change="findAreaList(selectRegion)"
               slot="prepend"
               clearable
               placeholder="请选择区">
        <el-option v-for="(items,index) in regionList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
      </el-select>
      <el-select style="margin: 10px"
               v-model="selectStreat"
               @change="findAreaList1(selectStreat)"
               slot="prepend"
               clearable
               placeholder="请选择街道">
        <el-option v-for="(items,index) in streatList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
      </el-select>
      <el-select style="margin: 10px"
               v-model="selectCommunity"
               slot="prepend"
               clearable
               placeholder="请选择小区">
          <el-option v-for="(items,index) in communityList " :key="index"
                 :label="items.areaName"
                 :value="items.areaId"></el-option>
      </el-select>
        <span style="width: 10%">感染时间：</span>
            <el-date-picker
              v-model="beginTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            -
            <el-date-picker
              v-model="endTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd">
            </el-date-picker>
              <el-button type="primary" style="width: 10%" @click="select()">搜索</el-button>
              <!-- <el-button type="primary" v-show="role == 3" @click="dialogFormVisible = true" style="width: 10%">添加</el-button> -->
          </div>
  
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="95" type="selection">
        </el-table-column>
        <el-table-column align="center" label="患者" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="患者姓名">
          <template slot-scope="scope">
            {{ scope.row.patientName }}
          </template>
        </el-table-column>
        <el-table-column label="性别" width="110" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.patientGender == '1'"> 男 </span>
            <span v-else> 女 </span>
          </template>
        </el-table-column>
        <el-table-column label="籍贯" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.patientBirthplace }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.patientPhone }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.patientStatus| statusFilter">{{scope.row.patientStatus | formatStata}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at"  label="感染时间"  width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.infectionDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行程轨迹" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.route }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="复核状态" width="200">
            <template slot-scope="scope">
            <el-tag :type="scope.row.patientStatus| statusFilter">{{scope.row.patientStatus | formatStata}}</el-tag>
          </template>
          <!-- <template slot-scope="scope">
            <el-button v-if="role == '3'" type="success" plain @click="editorPatient(scope.row)">编辑</el-button>
            <el-button v-else type="warning" plain @click="chackPatient(scope.row)">审核</el-button>
            <el-button type="danger" plain @click="delectPatient(scope.row)">删除</el-button>
          </template> -->
        </el-table-column>
      </el-table>
      <el-pagination
      style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { findPatientInArea,updatePatientRecheckStatus } from "@/api/regionAuditor/index"
import { getAreaListByUser,findAreaList } from "@/api/regin/area"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "success",
        draft: "gray",
        1: "danger",
      };
      return statusMap[status];
    },
    // 状态显示转换
    formatStata(status) {
      const statusMap = {
        0: '阴性',
        1: '阳性',
      };
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      checkState:null,
      patientName: "",
      cardId: null,
      role: "",
      areaLevel:"",
      judge:"",
      selectRegion:null,
      selectStreat:null,
      selectCommunity:null,
      communityList:[],
      streatList:[],
      regionList:[],
      beginTime:null,
      endTime:null,
      formLabelWidth: "120px",
      page:{
        total:0,
        currentPage: 1,
        size:5,
      },
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.role = this.$store.state.user.roles[0]
      getAreaListByUser().then((response) => {
        this.areaLevel = response.list[0].areaLevel
        if (this.role == "1") {
          response.list.forEach(element => {
          this.regionList.push(element)
          })
        } else if (this.role == "2") {
          response.list.forEach(element => {
            this.streatList.push(element)
          })
        }else if (this.role == "3") {
          response.list.forEach(element => {
            this.communityList.push(element)
          })
        }
      // this.$store.state.user.areaList
      //登录角色时暂无areaList
      console.log(this.role);
      //根据角色获取checkstatus
      if (this.role == "1") {
        this.checkState = 2
      }else if(this.role == "2"){
        this.checkState = 1
      }
      findPatientInArea(this.checkState,this.areaLevel,this.page.currentPage,this.page.size).then((response) => {
        if (response.obj) {
        this.list = response.obj.list
        this.page.total = response.obj.total
        }else{
          this.$message(
          {
            message:response.msg,
            type:'info'
          }
        )
        }
        this.listLoading = false
      })
        // console.log(this.streatList);
      })
    },
    // findPatientInArea(checkState,role){
    //   findPatientInArea(checkState,role,this.page.currentPage,this.page.size).then((response) => {
    //     this.list = response.obj.list
    //     this.page.total = response.obj.total
    //     this.listLoading = false
    //   })
    // },
    findAreaList(parentId) {
      // console.log(this.selectStreat);
      if(parentId != ""){
        findAreaList(parentId).then(response => {
            this.streatList = response.list
      })
      }else{
        this.streatList = null
      }
    },
    findAreaList1(parentId) {
      // console.log(this.selectStreat);
      if(parentId != ""){
        findAreaList(parentId).then(response => {
            this.communityList = response.list 
      })
      }else{
        this.communityList = null
      }
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.page.size = val
        this.fetchData()
      },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.currentPage = val
        this.fetchData()
      },
    select(){
      let areaLevel = this.areaLevel
      let areaId = ""
      if (this.selectStreat != "") {
        if( this.selectCommunity == null){
          areaLevel = 2
          areaId = this.selectStreat
        }else {
          areaLevel = 3
          areaId = this.selectCommunity
        }
      }
      findPatientInArea(this.checkState,areaLevel,this.page.currentPage,this.page.size,this.patientName,this.cardId,areaId,this.beginTime,this.endTime).then((response) => {
        if (response.obj) {
        this.list = response.obj.list
        this.page.total = response.obj.total
        }else{
          this.$message(
          {
            message:response.msg,
            type:'info'
          }
        )
        }
        this.listLoading = false
      })
    },
    

    //存一下患者，再对患者修改
    chackPatient(item){
      this.dialogFormVisible_check = true
      // console.log(item);
      this.patientId = item.patientId
    },
    changePatientChack(){
      updatePatientRecheckStatus(this.judge,this.patientId).then(response => {
        this.$message(
          {
            message:response.msg,
            type:'success'
          }
        )
        // this.reload();
      })
      this.dialogFormVisible_check = false
    },
  }
};
</script>
<style scoped>
.demo-input-suffix {
  margin-left: 1%;
}

.demo-input-suffix .el-input {
  margin: auto 1%;
}

.el-dialog .el-form-item {
  margin-right: 20% !important;

}
.el-dialog .el-form-item__label {
  position: absolute;
}
.el-dialog .el-form-item__content {
  width: 100%;
  padding-left: 80px;
}
.el-dialog .el-select,
.el-input_inner {
  width: 100%;
}

</style>